<template>
	<div class="p_c-container">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>{{ projectList[curProjectIndex].project.projectname }}</span>
			</div>
			<div v-for="(key,value,index) in showProjectDatas" :key="index" class="text item">
				<template v-if="key === 'projectIntro'">
					{{ value }} :
					<rich-text :nodes="projectList[curProjectIndex].project[key] | $_base64toUtf8"></rich-text>
				</template>
				<template v-else>
					{{ value }} : {{ projectList[curProjectIndex].project[key] }}
				</template>
			</div>
		</el-card>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>项目模块详情</span>
			</div>
			<div>
				<el-tree default-expand-all :data="projectList[curProjectIndex].module" :props="defaultProps"></el-tree>
			</div>
		</el-card>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>团队成员详情（在这里进行负责模块操作）</span>
			</div>
			<div>
				<el-collapse accordion>
					<block v-for="(item,index) in projectList[curProjectIndex].partners" :key="index">
						<el-collapse-item :title="item.username" :name="index+1">
							<template slot="title">
								<el-avatar size="small" :src="item.avatarUrl" style="margin-right: 10px;"></el-avatar> {{ item.username }}
							</template>
							<div style="text-align: right;">
								<el-button size="mini" plain round @click="showMyProjectModule(item,index)">模块详情</el-button>
								<template v-if="type==='underway'">
									<el-button size="mini" plain round type="primary" @click="handleUploadModule(item,index)" v-if="item.userID === relevanceUserID">上传<i class="el-icon-upload el-icon--right"></i></el-button>
									<el-button size="mini" plain round type="danger" @click="handleRemoveModule(item,index)" v-if="item.userID === relevanceUserID">删除<i class="el-icon-delete el-icon--right"></i></el-button>
								</template>
								<el-button size="mini" plain round type="success" @click="handleDownLoadModule(item,index)">下载<i class="el-icon-download el-icon--right"></i></el-button>
							</div>
							<block v-for="(key,value,index) in showPartnerData" :key="index">
								<div style="margin: 18px 0px;">
									<template v-if="key === 'individualResume' || key === 'projectExperience'">
										{{ value }} :
										<rich-text :nodes="item[key] | $_base64toUtf8"></rich-text>
									</template>
									<template v-else>
										{{ value }} : {{ item[key] }}
									</template>
								</div>
							</block>
						</el-collapse-item>
					</block>
				</el-collapse>
			</div>
		</el-card>
	</div>
</template>

<script>
	// 需要显示的项目，项目模块的映射
	import {showProjectDatas,showPartnerData} from "@/common/constant.js"
	export default{
		data(){
			return{
				showProjectDatas,
				showPartnerData,
				defaultProps: {
					children: 'children',
					label: 'label'
				}
			}
		},
		props:{
			projectList:{
				type:Array,
				default:[]
			},
			type:{
				type:String,
				default:"underway"
			},
			relevanceUserID:{},
			curProjectIndex:{
				type:Number,
				default:0
			}
		},
		methods:{
			showMyProjectModule(item,index){
				this.$emit('showMyProjectModule',item,index)
			},
			handleUploadModule(item,index){
				this.$emit('handleUploadModule',item,index)
			},
			handleDownLoadModule(item,index){
				this.$emit('handleDownLoadModule',item,index)
			},
			handleRemoveModule(item,index){
				this.$emit('handleRemoveModule',item,index)
			}
		}
	}
</script>

<style lang="scss">
	.p_c-container {
		margin-top: 20px;
		display: flex;
	
		.item {
			margin-bottom: 18px;
		}
	
		.clearfix:before,
		.clearfix:after {
			display: table;
			content: "";
		}
	
		.clearfix:after {
			clear: both
		}
	
		.box-card {
			width: 32%;
	
			&:nth-child(2) {
				margin: 0 2%;
			}
		}
	}
</style>
